<template>
  <div class="detail">
    <div class="detail-title">
      <!-- <div class="dot"></div> -->
      <div class="back-icon thumb" title="返回" @click="back">
          <img v-lazy="publicUrl(`/images/back.png`)" />
        </div>
      <span class="title"> 素材编辑下载 </span>
    </div>
    <div class="detail-content">
      <div class="left">
        <div class="detail-img">
          <img v-lazy="publicUrl(`/images/poster.jpg`)" />
        </div>
        <div class="font">
          <div class="title line-feed">
            <span>夏季MTM定制化男西装活动海报</span>
          </div>
          <div class="small line-feed">
            <span
              >愈简单愈值得琢磨,单一也是唯一。在随性与优雅之间随意转换,
              抚摸绸缎般的触感,以淡泊的姿态,泰然等风来。</span
            >
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <div class="button thumb" @click="downLoad">下载素材</div>
          <div class="button thumb" @click="()=>copyHandel(source)">复制文案</div>
          <div class="button thumb" @click="editImg">编辑图片</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl,aDownLoad } from "@/utils/util";
import { useClipboard } from '@vueuse/core'

import {toast } from "vue3-toastify"
import  {useRouter}   from "vue-router";
document.documentElement.scrollTop = 0;
const source = ref<string>(`夏季MTM定制化男西装活动海报
愈简单愈值得琢磨,单一也是唯一。在随性与优雅之间随意转换, 抚摸绸缎般的触感,以淡泊的姿态,泰然等风来。`);
const { copy } = useClipboard();
const router = useRouter();
//复制功能
const copyHandel = async (source:string) => {
  await copy(source);
  toast.info("复制成功");
};
const downLoad = async ()=>{
  aDownLoad(publicUrl(`/images/poster.jpg`),'poster');
  toast.info("下载成功");
}
const back = async ()=>{
  router.go(-1);
}
const editImg = async() =>{
  router.push({path:'/material/edit?material_id=1'});
}

</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
